<div class="nv-dialog">
  <div class="d-flex justify-content-between align-items-center">
    <h4 mat-dialog-title class="mb-2">
      {{
        (type === 'add' ? 'service.ADD_RULE' : 'service.EDIT_RULE') | translate
      }}
      <span
        class="eos-icons icon-18"
        [matTooltip]="'group.file.RULE_SAMPLE' | translate"
        >info</span
      >
    </h4>
    <button
      (click)="onCancel()"
      class="mb-2"
      aria-label="Close dialog"
      mat-icon-button>
      <i class="eos-icons">close</i>
    </button>
  </div>
  <hr class="fancy mb-2" />
  <div mat-dialog-content class="dialog-content p0 m0">
    <form [formGroup]="fileAccessRuleForm">
      <div class="d-flex justify-content-start align-items-start mt-2">
        <mat-form-field appearance="fill">
          <mat-label>{{ 'group.GROUP' | translate }}</mat-label>
          <mat-select matNativeControl required formControlName="group">
            <mat-option
              *ngFor="let groupOption of groupOptions"
              [value]="groupOption"
              >{{ groupOption }}</mat-option
            >
          </mat-select>
          <mat-error>Group is required!</mat-error>
        </mat-form-field>
      </div>
      <div class="d-flex justify-content-end align-items-center mt-2">
        <div class="d-flex mr-2">
          <mat-form-field appearance="fill">
            <mat-label>{{ 'service.gridHeader.FILTER' | translate }}</mat-label>
            <input
              matInput
              name="filter"
              formControlName="filter"
              required
              [readonly]="type === 'edit'" />
            <mat-error
              *ngIf="fileAccessRuleForm.get('filter')?.hasError('required')"
              >Filter is required!</mat-error
            >
            <mat-error
              *ngIf="fileAccessRuleForm.get('filter')?.hasError('pattern')"
              >Format is not right!</mat-error
            >
          </mat-form-field>
          <div style="margin: 25px 5px 0 5px">
            <mat-checkbox
              name="recursive"
              formControlName="recursive"
              class="example-ripple-checkbox mr">
              {{ 'service.gridHeader.RECURSIVE' | translate }}
            </mat-checkbox>
          </div>
        </div>

        <div class="d-flex flex-column mb-2">
          <div>
            <mat-label class="mr-1">{{
              'service.ALLOW_ALERT' | translate
            }}</mat-label>
          </div>
          <div>
            <label class="radio-inline c-radio mr-2">
              <input
                id="monitor-change"
                type="radio"
                name="behavior"
                formControlName="behavior"
                required
                [value]="actionEnum.MONITOR" />
              <span class="fa fa-binoculars text-discover ml-1"></span>
              {{ 'enum.MONITOR_CHANGE' | translate }}
            </label>
            <label class="radio-inline c-radio">
              <input
                id="block-access"
                type="radio"
                name="behavior"
                formControlName="behavior"
                required
                [value]="actionEnum.BLOCK" />
              <span class="fa fa-shield-alt text-protect ml-1"></span>
              {{ 'enum.BLOCK_ACCESS' | translate }}
            </label>
          </div>
        </div>
      </div>
      <div class="d-flex justify-content-start align-items-start mt-2">
        <mat-form-field appearance="fill" class="flex-grow-1">
          <mat-chip-list #chipList aria-label="Apps selection">
            <mat-chip
              *ngFor="let app of applicationChipsArray"
              [selectable]="true"
              [removable]="true"
              (removed)="removeAppFromChip(app)">
              {{ app }}
              <mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
            </mat-chip>
            <input
              matInput
              placeholder="{{ 'service.gridHeader.APPLICATIONS' | translate }}"
              #AppsInput
              name="apps"
              formControlName="applications"
              [matChipInputFor]="chipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              [matChipInputAddOnBlur]="true"
              (matChipInputTokenEnd)="addAppIntoChip($event)" />
          </mat-chip-list>
          <em matSuffix class="icon-puzzle input-icon"></em>
          <mat-error>Criterion is required!</mat-error>
        </mat-form-field>
      </div>
    </form>
  </div>
  <div mat-dialog-actions class="d-flex justify-content-end align-items-center">
    <button mat-stroked-button class="modal-cancel-button" (click)="onCancel()">
      {{ 'group.editGroup.CANCEL' | translate }}
    </button>
    <button
      mat-raised-button
      color="primary"
      (click)="addEditFileAccessRule()"
      [disabled]="fileAccessRuleForm.invalid">
      {{ 'policy.portlet.SUBMIT' | translate }}
    </button>
  </div>
</div>
